<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>欢迎页</title>

    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
   <!-- <link rel="stylesheet" href="${request.contextPath}/statics/css/bootstrap.min.css">-->
    <link rel="stylesheet" href="${request.contextPath}/statics/css/font-awesome.min.css">
    <link rel="stylesheet" href="${request.contextPath}/statics/css/adminlte.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="${request.contextPath}/statics/css/all-skins.min.css">
    <link rel="stylesheet" href="${request.contextPath}/statics/css/main.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
      <section class="content">
          <div class="container-fluid">
              <!--设备统计-->
              <div class="row">
                  <div class="col-md-4">
                      <div class="small-box ">
                          <div class="inner">
                              <h3 id="total">0</h3>

                              <p>设备总数</p>
                          </div>
                          <div class="icon">
                              <i class="icon ion-ios-gear-outline"></i>
                          </div>
                      </div>
                  </div>
                  <div class="col-md-4">
                      <div class="small-box ">
                          <div class="inner">
                              <h3 id="online">0</h3>

                              <p>在线设备</p>
                          </div>
                          <div class="icon">
                              <i class="icon ion-ios-checkmark-outline"></i>
                          </div>
                      </div>
                  </div>
                  <div class="col-md-4">
                      <div class="small-box ">
                          <div class="inner">
                              <h3 id="offline">0</h3>

                              <p>离线设备</p>
                          </div>
                          <div class="icon">
                              <i class="icon ion-ios-close-outline"></i>
                          </div>
                      </div>
                  </div>
              </div>
              <!--安装点数据-->
              <div class="row">
                  <div class="col-lg-12">
                      <div class="card" style="height: 580px">
                          <div class="card-header d-flex p-0">
                              <h3 class="card-title p-3">
                                  <i class="fa fa-pie-chart mr-1"></i>
                                  Sales
                              </h3>
                          </div><!-- /.card-header -->
                          <div style="height: 500px">
                              <iframe src="modules/baseinfo/lhpDataEquipmentinfo.html" width="100%" height="100%" frameborder="0">
                                  您的浏览器不支持iframe，请升级
                              </iframe>
                          </div><!-- /.card-body -->
                      </div>
                  </div>
                 <!-- <div class="col-lg-5">
                      111
                  </div>-->
              </div>
          </div>
      </section>
  </body>
<script src="../../statics/libs/jquery.min.js"></script>
<script>
    $(function () {
        getEquipmentByUserId();
    })
    function getEquipmentByUserId(){
        $.get( "../../baseinfo/lhpequipment/getEquipmentByUserId", function(r){
            var list= r.list;
            var online=0;
            var offline=0
            for (var i = 0; i <list.length ; i++) {
                if (list[i].equipmentStatus=='0'){
                    online++;
                }else {
                    offline++;
                }
            }
            $('#total').text(list.length);
            $('#online').text(online);
            $('#offline').text(offline);
        });
    }
</script>
  </html>